<template>
	<view class="page">
		<!-- <view class="flex benben-position-layout flex flex-wrap align-center testExamination_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub testExamination_fd0_0'>
				<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  testExamination_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<text class='testExamination_fd0_0_c1'>支付记录</text>
				<view class='flex flex-wrap align-center testExamination_fd0_0_c2'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view> -->
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#FC5B03"></u-loading>
			<view>加载中</view>
		</view>
		<template v-else>
			<view class="list">
				<view class="list_item flex" v-for="(item, index) in list" :key="index">
					<view class="item_img">
						<image v-if="item.payment_type == 'douyin_pay'" class="item_img" :src='STATIC_URL+"263.png"'></image>
						<image v-if="item.payment_type == 'wechat_native_pay'" class="item_img" :src='STATIC_URL+"264.png"'></image>
						<image v-if="item.payment_type == 'wechat_xcx'" class="item_img" :src='STATIC_URL+"264.png"'></image>
						<image v-if="item.payment_type == 'offline_pay'" class="item_img" :src='STATIC_URL+"logo.png"'></image>
						<image v-if="item.payment_type == 'alipay_xcx' || item.payment_type == 'alipay_face_to_face'" class="item_img" :src='STATIC_URL+"265.png"'></image>
					</view>
					<view class="item_content">
						<view class="flex align-center justify-between">
							<view class="content_le">
								<view class="content_le_1" v-if="item.payment_type == 'douyin_pay'">抖音支付</view>
								<view class="content_le_1" v-if="item.payment_type == 'wechat_native_pay'">微信二维码支付</view>
								<view class="content_le_1" v-if="item.payment_type == 'wechat_xcx'">微信小程序支付</view>
								<view class="content_le_1" v-if="item.payment_type == 'offline_pay'">线下支付</view>
								<view class="content_le_1" v-if="item.payment_type == 'alipay_xcx'">支付宝支付</view>
								<view class="content_le_1" v-if="item.payment_type == 'alipay_face_to_face'">支付宝二维码支付</view>
								<view class="content_le_2">{{item.payment_datatime}}</view>
							</view>
							<view class="content_ri">
								<view class="content_ri_1">+￥{{item.order_amount}}</view>
								<view class="content_ri_2">支付成功</view>
							</view>
						</view>
						<view class="refund" v-if="item.refund_count > 0">
							<view class="refund_title flex align-center" @tap.stop="refundRecord(item.id, index)">
								<text>退款记录</text>
								<image :src='STATIC_URL+"279.png"' v-if="!item.isSelect"></image>
								<image :src='STATIC_URL+"280.png"' v-else></image>
							</view>
							<template v-if="item.isSelect">
								<view class="refund_text flex align-center justify-between" v-for="(v, k) in refundList" :key="k">
									<view class="refund_text_1">{{v.create_at}}</view>
									<view class="refund_text_2">-{{v.price}}</view>
								</view>
							</template>
							
						</view>
					</view>
				</view>
			</view>
		</template>
		
		<view class="noData" v-if="list.length == 0 && !isShow">
			<image :src='STATIC_URL+"no.png"'></image>
			<view>暂无记录~</view>
		</view>
		
	</view>
</template>
<script>
	export default {
		components: {},

		data() {
			return {
				order_id: "",
				isShow: true,
				list: [],
				refundList: [],
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			let { order_id } = options;
			if (order_id !== undefined) this.order_id = order_id;
			this.getPayList();
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			getPayList() {
				this.$api.post(global.apiUrls.getCarPay, {
					order_id: this.order_id
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.list = res.data.data;
						if (this.list.length > 0) {
							this.list.forEach((v, k) => {
								v.isSelect = false;
							})
						}
					} else {
						this.$message.info(res.data.info);
					}
				})
			},
			// 单个支付记录下的退款记录
			refundRecord(id, index) {
				if (this.list[index].isSelect) {
					this.list[index].isSelect = false;
					this.$forceUpdate();
				} else {
					this.list.forEach((v, k) => {
						v.isSelect = false;
					})
					uni.showLoading({
						title: '加载中'
					})
					this.$api.post(global.apiUrls.postPayRefund, {
						payment_id: id
					}).then(res => {
						// console.log(res);
						uni.hideLoading();
						if (res.data.code == 1) {
							this.list[index].isSelect = true;
							this.refundList = res.data.data;
							this.$forceUpdate();
						} else {
							this.$message.info(res.data.info);
						}
					}).catch(err => {
						uni.hideLoading();
					})
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.list {
		padding: 0 24rpx;
		.list_item {
			margin-top: 24rpx;
			border-radius: 16rpx;
			background: #fff;
			padding: 26rpx 20rpx;
			.item_img {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
				transform: translateY(4rpx);
			}
			.item_content {
				width: calc(100% - 72rpx);
				padding-left: 24rpx;
				.content_le {
					.content_le_1 {
						font-weight: bold;
						font-size: 26rpx;
						color: #111111;
					}
					.content_le_2 {
						font-weight: 400;
						font-size: 22rpx;
						color: #999999;
						margin-top: 12rpx;
					}
				}
				.content_ri {
					.content_ri_1 {
						font-weight: bold;
						font-size: 32rpx;
						color: #111111;
						text-align: right;
					}
					.content_ri_2 {
						font-weight: 400;
						font-size: 24rpx;
						color: #111111;
						margin-top: 8rpx;
						text-align: right;
					}
				}
				.refund {
					margin-top: 16rpx;
					.refund_title {
						font-weight: 400;
						font-size: 22rpx;
						color: #1A66FA;
						image {
							width: 24rpx;
							height: 24rpx;
						}
					}
					.refund_text {
						margin-top: 8rpx;
						.refund_text_1 {
							font-weight: 400;
							font-size: 22rpx;
							color: #999999;
						}
						.refund_text_2 {
							font-weight: 400;
							font-size: 22rpx;
							color: #111111;
						}
					}
				}
			}
		}
	}
	.personalInformation_fd1_0 {
		padding: 28rpx 0;
		border-top: 2rpx solid #eee;
	}
	
	.personalInformation_fd1_0_c0 {
		font-size: 28rpx;
		color: rgba(0,0,0,0.6);
	}
	.personalInformation_fd1_1_c1 {
		font-size: 28rpx;
		font-weight: 400;
		color: #111;
		text-align: right;
	}
	
	
	.feedback_fd4_0 {
		width: 640rpx;
		border-radius: 80rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		margin: 0rpx 32rpx 0rpx 32rpx;
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
		background: #FC5B03;
	}
	
	.feedback_flex_4 {
		width: 750rpx;
		height: 120rpx;
		overflow: hidden;
		position: fixed;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
		display: flex;
		justify-content: center;
		background: #fff;
	}
	
	
	
	
	.testExamination_fd1_0 {
		margin: 0rpx 16rpx 0rpx 0rpx;
		padding: 40rpx 32rpx 24rpx 32rpx;
	}

	.testExamination_fd1_0_c0 {
		width: 36rpx;
		height: 36rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.testExamination_fd1_0_c1 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: #333333;
	}

	.testExamination_notAnfd1_1_c0 {
		background: rgba(244, 250, 255, 1);
		background-size: 100% !important;
		width: 750rpx;
		height: 80rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.testExamination_anfd1_1_c0 {
		background: rgba(244, 250, 255, 1);
		background-size: 100% !important;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		padding: 0rpx 32rpx 0rpx 32rpx;
		width: 750rpx;
		height: 80rpx;
	}

	.testExamination_areafd1_1_c0 {
		min-height: 80rpx;
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.testExamination_notAnfd1_1_c0_c0_c0 {
		width: 36rpx;
		height: 36rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.testExamination_notAnfd1_1_c0_c0_c1 {
		margin: 0rpx 20rpx 0rpx 0rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: #1593FF;
	}

	.testExamination_notAnfd1_1_c0_c0_c2 {
		font-weight: 700;
		font-size: 32rpx;
		color: #1593FF;
		line-height: 45rpx;
		text-decoration: none;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.testExamination_anfd1_1_c0_c0_c0 {
		width: 36rpx;
		height: 36rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.testExamination_anfd1_1_c0_c0_c1 {
		margin: 0rpx 20rpx 0rpx 0rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: #1593FF;
	}

	.testExamination_anfd1_1_c0_c0_c2 {
		font-weight: 700;
		font-size: 32rpx;
		color: #1593FF;
		line-height: 45rpx;
		text-decoration: none;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.testExamination_areafd1_1_c0_c0 {
		border-bottom: 1px solid #eee;
		padding: 32rpx 0rpx 40rpx 0rpx;
	}

	.testExamination_areafd1_1_c0_c0_c0 {
		margin: 0rpx 0rpx 24rpx 0rpx;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c0 {
		margin: 0rpx 0rpx 24rpx 0rpx;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c0_c0 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		margin: 0rpx 15rpx 0rpx 0rpx;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c0_c1 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c1_c0 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(21, 147, 255, 1);
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c1_c1 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c1_c2 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c1_c3 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		margin: 0rpx 32rpx 0rpx 0rpx;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c1_c4 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c1_c5 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.testExamination_areafd1_1_c0_c0_c0_c1 {
		font-size: 26rpx;
		color: rgba(191, 191, 191, 1);
	}

	.testExamination_areafd1_1_c0_c0_c1 {
		background: rgba(242, 242, 242, 1);
		background-size: 100% !important;
		width: 602rpx;
		height: 16rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background-size: 100% auto !important;
	}

	.testExamination_progress1_areafd1_1_c0_c0_c1 {
		background: rgba(21, 147, 255, 1);
		background-size: 100% !important;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	.testExamination_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		height: 88rpx;
	}

	.testExamination_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #111;
	}

	.testExamination_fd0_0_c1 {
		font-size: 32rpx;
		font-weight: bold;
		color: #111111;
	}

	.testExamination_fd0_0_c2 {
		width: 36rpx;
		height: 36rpx;
	}

	.testExamination_flex_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		background-size: 100% !important;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.page {
		min-height: calc(100vh - var(--window-bottom));
		background: #f6f7fb;
		background-size: 100% auto !important;
	}
</style>